/*
 Copyright Amazon.com, Inc. or its affiliates. All Rights Reserved.
 SPDX-License-Identifier: Apache-2.0
*/

@use '@cloudscape-design/component-toolkit/internal/focus-visible' as focus-visible;
@use '../../internal/styles' as styles;
@use '../../internal/styles/tokens' as awsui;
@use '../../token/constants' as constants;

$token-padding-block: styles.$control-padding-vertical;
$token-padding-inline: styles.$control-padding-horizontal;
$token-grouped-padding-block: 2px;
$token-grouped-padding-inline: styles.$control-padding-horizontal;
$inner-token-padding-block: 1px;
$inner-token-padding-inline: styles.$control-padding-horizontal;
$border-radius-token: awsui.$border-radius-token;
$border-radius-inner-token: calc(#{awsui.$border-radius-token} / 2);

.root,
.inner-root {
  @include styles.styles-reset;

  display: flex;
  align-content: stretch;

  // Make tokens larger so that individual and group tokens appear of the same size.
  &.has-groups {
    min-block-size: calc(2px + #{awsui.$size-vertical-input});

    &.compact-mode {
      min-block-size: calc(2px + 2 * #{awsui.$border-width-token} + #{awsui.$size-vertical-input});
    }
  }
}

.inner-root {
  block-size: 100%;
}

.token,
.inner-token {
  border-block: awsui.$border-width-token solid constants.$token-border-color;
  border-inline: awsui.$border-width-token solid constants.$token-border-color;
  display: flex;
  align-items: stretch;
  background: constants.$token-background;
  border-start-start-radius: $border-radius-token;
  border-start-end-radius: $border-radius-token;
  border-end-start-radius: $border-radius-token;
  border-end-end-radius: $border-radius-token;
  color: awsui.$color-text-body-default;
  box-sizing: border-box;

  &.grouped {
    justify-content: space-between;
  }
}

.inner-token {
  border-start-start-radius: $border-radius-inner-token;
  border-start-end-radius: $border-radius-inner-token;
  border-end-start-radius: $border-radius-inner-token;
  border-end-end-radius: $border-radius-inner-token;
}

.list {
  list-style: none;
  margin-block: 0;
  margin-inline: 0;
  padding-block: 0;
  padding-inline: 0;
  display: flex;
  flex-wrap: wrap;
  gap: awsui.$space-xs;
}

.show-operation {
  border-inline-start: none;
  border-start-start-radius: 0;
  border-end-start-radius: 0;
}

.select,
.inner-select {
  /* used in test-utils */
}

.token-content {
  display: flex;
  align-items: center;

  padding-block: $token-padding-block;
  padding-inline: $token-padding-inline;

  &-grouped {
    padding-block: $token-grouped-padding-block;
    padding-inline: $token-grouped-padding-inline;
  }
}

.inner-token-content {
  padding-block: $inner-token-padding-block;
  padding-inline: $inner-token-padding-inline;
}

.edit-button,
.dismiss-button,
.inner-dismiss-button {
  inline-size: 30px;
  margin-block: 0;
  margin-inline: 0;
  border-block: none;
  border-inline: none;
  padding-block: 0;
  padding-inline: awsui.$space-xxs;
  color: awsui.$color-text-interactive-default;
  background-color: transparent;
  border-inline-start: awsui.$border-width-button solid constants.$token-border-color;

  @include focus-visible.when-visible {
    @include styles.focus-highlight(awsui.$space-filtering-token-dismiss-button-focus-outline-gutter);
  }

  &:focus {
    outline: none;
    text-decoration: none;
  }

  &:hover {
    cursor: pointer;
    color: awsui.$color-text-interactive-hover;
  }

  &:disabled {
    color: awsui.$color-text-interactive-disabled;
    border-color: awsui.$color-border-control-disabled;
  }
}

.token-disabled {
  border-color: awsui.$color-border-control-disabled;
  background-color: awsui.$color-background-container-content;
  color: awsui.$color-text-disabled;
  pointer-events: none;
}
